<template>
  <div class="header">
    <el-button :title="tips" @click="backHome" class="logo">Zegobird SCM</el-button>
    <div class="content">
      <SCMMenu/>
      <div class="language-wrap">
        <el-select size="small" v-model="language" :placeholder="activeLanguage" @change="switchLanguage">
          <el-option
            v-for="item in languageOptions.slice(0,2)"
            :key="item.value"
            :label="item.label"
            :value="item.lang">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="user-pannel">
      <span class="welcome-text">{{$t('m.hello')}}</span>
      <el-dropdown @command="handleUserCommand">
        <span class="el-dropdown-link">
          <span class="user-name">{{$store.state.basicInfo.userInfo.username}}</span>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="edit">{{$t('m.edit')}}</el-dropdown-item>
          <el-dropdown-item command="logout">{{$t('m.logOut')}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
import SCMMenu from './nav-menu-horizontal'
export default {
  name:'scm-header',
  data(){
    return {
      language:'',
      languageOptions:[
        {value:0, label:'中文', lang:'cn'},
        {value:1, label:'ENGLISH', lang:'en'},
        {value:2, label:'缅文', lang:'mm'}
      ]
    }
  },
  mounted(){

  },
  computed:{
    activeLanguage(){
      return this.languageOptions.find((item)=>{
        return item.lang === this.$store.getters.getLanguage
      }).label
    },
    tips(){
      return this.$t('m.home.backhome')
    }
  },
  components:{
    SCMMenu
  },
  methods:{
    backHome(){
      this.$router.push({path:'index'})
    },
    handleUserCommand(command){
      switch(command){
      case 'edit':
        this.$router.push({ name:'configure' })
        break
      case 'logout':
        this.logoutFn()
        break
      default:
        this.callbackMessage('无法执行该指令')
      }
    },
    logoutFn(){
      let options = {
        method:'get',
        url:`/user/logout`
      }
      this.$axios(options).then(() => {
        sessionStorage.clear()
        this.$store.replaceState(Object.assign({},this.cloneObject(this.$store.state.reset.initState),{reset:this.$store.state.reset})) // 重置vuex的state
        this.$router.push({name:'login'})
      })
    },
    switchLanguage(lang){
      let userId = this.$store.state.basicInfo.userInfo.id
      let options = {
        method:'get',
        url:`/user/query/${userId}?lang=${lang}`
      }
      this.$axios(options).then(({data})=>{
        this.$store.commit('setLanguage',lang) // 更改當前語言

        this.$i18n.locale = lang // 全局国际化
        this.$store.commit('setNavMenu',data.tree) // 設置渲染菜單
        let menuTag = this.$store.state.basicInfo.menuTag // 获取当前标签数组
        let subMenu = this.$store.state.basicInfo.subMenu // 获取所有子菜单
        // 遍历标签数组，根据标签id，设置title值
        for(let i=0;i<menuTag.length;i++){
          for(let j=0;j<subMenu.length;j++){
            if(menuTag[i].id === subMenu[j].id){
              this.$store.commit('setTagText',{index:i,title:subMenu[j].title}) // 根据当前语言，设置当前标签文字
              continue
            }
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.header{
  height: 60px; line-height: 60px; font-size: 20px; color: #fff; background-color: #56a5d8; display: flex;
  &>*{padding: 0 10px;}
  .logo{
    width: 220px;
    font-size: 20px;
    border: 0;
    border-radius: 0;
    color: #fff;
    background-color: #56a5d8;
    }
  .tool-btn{
    font-size: 30px;
    i{cursor: pointer;}
  }
  .content{
    text-align: right; background-color: #545c64; flex: 1; display: flex; justify-content: space-between;
    .el-select{width: 150px; vertical-align: middle;}
  }
  .user-pannel{
    width: 200px; display: flex;
    .welcome-text{font-size: 16px; flex: 1;}
    .el-dropdown-link{
      min-width: 120px; font-size: 16px; color: #fff; display: flex; align-items: center; justify-content: space-around;
      .user-name{max-width: 100px; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis;}
    }
  }
  .language-wrap{
    flex-shrink: 0;
  }
}
</style>